import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import { View, Text, Button } from '@tarojs/components';
import './index.scss'
import DataPicker from '@/components/DataPicker';
import { queryFundPoolNetMetrics } from '@/services/api/fund';

interface FundDetailIndexProps {
  className?: string;
  detailData: {};
}

class FundDetailIndex extends Component<FundDetailIndexProps, any> {

  config = {
    navigationBarTitleText: '',
  }

  state = {
    yearButtonList: [{ label: '近1年', value: 1 }, { label: '近3年', value: 3 }, { label: '近5年', value: 5 }, { label: '成立以来', value: 99 }],
    yearsNum: 1,
    indexData:{},
  }

  componentWillMount() {
    this.queryFundNetMetrics(1)
  }
  componentDidMount() { }
  componentWillReceiveProps(nextProps, nextContext) {
    this.queryFundNetMetrics(1)
  }
  componentWillUnmount() { }

  /**
    * 产品指标
    * @param yearsNum 
    */
  queryFundNetMetrics(yearsNum) {
    const { detailData } = this.props
    var performance = detailData['performance']
    var tempIndexData = {}
    if (yearsNum === 1) {
      tempIndexData['sharpeRatio'] = performance['sharpeRate1y']
      tempIndexData['karmaRatio'] = performance['calmarRate1y']
      tempIndexData['standardDeviation'] = performance['standardDeviation1y']
      tempIndexData['maximumRetraction'] = performance['maxDrawDown1y']
      tempIndexData['earningsRate'] = performance['pnl1y']
    } else if (yearsNum === 3) {
      tempIndexData['sharpeRatio'] = performance['sharpeRate3y']
      tempIndexData['karmaRatio'] = performance['calmarRate3y']
      tempIndexData['standardDeviation'] = performance['standardDeviation3y']
      tempIndexData['maximumRetraction'] = performance['maxDrawDown3y']
      tempIndexData['earningsRate'] = performance['pnl3y']
    } else if (yearsNum === 5) {
      tempIndexData['sharpeRatio'] = performance['sharpeRate5y']
      tempIndexData['karmaRatio'] = performance['calmarRate5y']
      tempIndexData['standardDeviation'] = performance['standardDeviation5y']
      tempIndexData['maximumRetraction'] = performance['maxDrawDown5y']
      tempIndexData['earningsRate'] = performance['pnl5y']
    } else if (yearsNum === 99) {
      tempIndexData['sharpeRatio'] = performance['sharpeRate']
      tempIndexData['karmaRatio'] = performance['calmarRate']
      tempIndexData['standardDeviation'] = performance['standardDeviation']
      tempIndexData['maximumRetraction'] = performance['maxDrawDown']
      tempIndexData['earningsRate'] = performance['rate']
    }
    this.setState({indexData:tempIndexData})
  }

  changeCurrent(index) {
    const { yearButtonList, } = this.state
    var item = yearButtonList[index]
    this.queryFundNetMetrics(item['value'])
  }

  render() {
    const { className, detailData } = this.props
    const { yearButtonList,indexData } = this.state

    return (
      <View className={`fund-detail-index ${className}`}>
        <View data-position='heard' className='table-header' >
          <View className='header-item col-3'>指标名称</View>
          <View className='header-item col-1 text-right'>本产品</View>
        </View>
        <View data-position='content' className='table-content'>
          <View className='table-item'>
            <Text className='col-3'>收益率</Text>
            <Text className={`col-1 text-right  ${Number(indexData['earningsRate']) === 0? '' : Number(indexData['earningsRate']) > 0? 'num-positive-text':'num-negative-text'}`}>{(Number(indexData['earningsRate'])*100).toFixed(2) + '%'}</Text>
          </View>
          <View className='table-item'>
            <Text className='col-3'>夏普比率</Text>
            <Text className='col-1 text-right'>{(Number(indexData['sharpeRatio'])).toFixed(4)}</Text>
          </View>
          <View className='table-item'>
            <Text className='col-3'>卡玛比率</Text>
            <Text className='col-1 text-right'>{(Number(indexData['karmaRatio'])).toFixed(4)}</Text>
          </View>
          <View className='table-item'>
            <Text className='col-3'>标准差</Text>
            <Text className='col-1 text-right'>{(Number(indexData['standardDeviation'])).toFixed(2) + '%'}</Text>
          </View>
          <View className='table-item'>
            <Text className='col-3'>最大回撤</Text>
            <Text className='col-1 text-right'>{(Number(indexData['maximumRetraction'])*100).toFixed(2) + '%'}</Text>
          </View>
          <View className='bottom-year'>
            <DataPicker changeCurrent={(e) => this.changeCurrent(e)} dataList={yearButtonList}></DataPicker>
          </View>
        </View>
        <View data-position='foot' className='data-foot' >
          指标根据历史数据计算所得，仅供参考
        </View>
      </View>
    );
  }
}
export default FundDetailIndex;